<template>
<div class="product-edit-container">
  <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
    <el-step title="基本信息"></el-step>
    <el-step title="商品参数"></el-step>
    <el-step title="商品属性"></el-step>
    <el-step title="商品图片"></el-step>
    <el-step title="商品内容"></el-step>
  </el-steps>
  <!-- :inline="true" label-width="80px" -->
  <el-form :model="productModel" :rules="productFormRules"  
    ref="productFormRef" >
    <el-tabs v-model="activeIndex" tab-position="left" :before-leave="beforeTabLeave" >
      <el-tab-pane label="基本信息" name="0">
        <product-info :form="productModel" :rules="productFormRules"></product-info>
      </el-tab-pane>
      <el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
      <el-tab-pane label="商品图片" name="3">
        <product-picture ref="productPicture" :model="productModel" 
        :rules="productFormRules"
        @on-add="onAddPicture" @on-delete="onDeletePicture" @on-swap="onSwapPicture"></product-picture>
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="4">
        <product-description :model="productModel" :rules="productFormRules"></product-description>
      </el-tab-pane>
    </el-tabs>

    <el-form-item class="save-btn">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>

  </el-form>
</div>
</template>

<script>
import { getProduct, getProductPictures, addProduct, updateProduct } from "@/api/catalog/product";  
import ProductInfo from './components/product-info'
import ProductDescription from './components/product-desc'
import ProductPicture from './components/product-picture.vue'
export default {
    name: 'ProductEdit',
    components: {
      ProductInfo,
      ProductDescription,
      ProductPicture
    },

    data () {
      return {
        activeIndex: '0',
        productModel: {},
        pictureLoaded: false,
        productFormRules:{
          productName: [
            { required: true, message: '请输入活商品动名称', trigger: 'blur' },
            { min: 2, max: 255, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleEdit () {
        return;
      },
      onAddPicture (picture) {
        console.log('添加图片：', picture)
      },
      onDeletePicture (productPictureId) {
        console.log('删除图片：', productPictureId)
      },
      onSwapPicture (pictures) {
        console.log('移动图片：', pictures)
      },
      beforeTabLeave(activeName, oldActiveName){
        // console.log('activeName, oldActiveName', activeName, oldActiveName)
        if(!this.pictureLoaded && activeName === '3')
        {
          this.$refs.productPicture.loadPictures(this.productModel.productId)
          this.pictureLoaded = true
          console.log('加载了图片', this.productModel.productId)
        }
      },
      async handleUpdate(productId) {
        const {data: product} = await getProduct(productId)

        product.pictureList = []
        this.productModel = product;
        // const {data: productPictures} = await getProductPictures({productId: productId})
        // // console.log('productPictures:', productPictures)
        // // 这里将 获取图片放到 图片 tabItem 中
        // this.productModel.pictureList = productPictures
        // console.log('父组件获取数据成功:', this.productModel)
      },
      onSubmit () {
        // console.log('mounted') productFormRef
        console.log('product edit onSubmit:', this.productModel)
      }
    },
    mounted () {
      // console.log('ProductEdit mounted')
    },
    async created () {
      // console.log('ProductEdit created')
      await this.handleUpdate(this.$route.params.productId)
    }

}
</script>

<style scoped>
  .save-btn{
    margin: 20px 105px;
  }

</style>